@import "../../../../../styles/variables";

$afk: #f1c40f;
$online: #27ae60;
$offline: #2c3e50;
$size: 12px;

:host,
.seller,
.dot {
  display: flex;
}

:host {
  width: 100%;
  padding: $gutter-half $gutter-half 0 $gutter-half;
}

.seller {
  color: $light-dark-grey;
  font-size: 12px;
  width: 60px;
  overflow: hidden;
}

.dot {
  width: $size;
  height: $size;
  border-radius: 50%;

  &.afk {
    background: $afk;
    box-shadow: 0px 0px 3px darken($color: $afk, $amount: 30%), inset 0px 1px 2px lighten($color: $afk, $amount: 3%);
  }

  &.online {
    background: $online;
    box-shadow: 0px 0px 3px darken($color: $online, $amount: 30%),
      inset 0px 1px 2px lighten($color: $online, $amount: 3%);
  }

  &.offline {
    background: $offline;
    box-shadow: 0px 0px 3px darken($color: $offline, $amount: 30%),
      inset 0px 1px 2px lighten($color: $offline, $amount: 3%);
  }
}
